<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="page/breastmilk/css/breastmilkSetList.css" />
    <style>
        .wrapper .content {
            padding: 20px;
        }
        .wrapper .ctrl {
            height: auto;
            padding-bottom: 0;
        }
        .wrapper .ctrl .block {
            width: 210px;
            display: inline-block;
            vertical-align: top;
            margin-bottom: 10px;
        }
        .wrapper .ctrl .block .key {
            width: 70px;
        }
        .wrapper .content {
            padding-top: 0;
        }
        .el-table--border, .el-table--group {
            border: 1px solid #ddd;
        }
        .el-table td, .el-table th.is-leaf {
            border-bottom: 1px solid #ddd;   
        }
        .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #ddd;
        }
        .el-table--enable-row-transition .el-table__body td {
            padding: 4px 0;
        }
        .el-tooltip__popper.is-dark {
            max-width: 400px;
        }
    </style>
</head>
<body>
    <div id="root" class="wrapper">
        <div class="title">待发送备乳列表</div>
        <div class="ctrl" style="margin-bottom: 0px;">
            <div class="block">
                <span class="key">宝宝姓名1</span>
                <el-input v-model="search.name" size="small" style="width: 130px;" placeholder="请输入姓名" />
            </div>
            <div class="block">
                <span class="key">联系方式</span>
                <el-input v-model="search.phone" size="small" style="width: 130px;" placeholder="请输入姓名" />
            </div>
            <div  class="block">
                <span class="key">住院号</span>
                <el-input v-model="search.No" size="small" style="width: 130px;" placeholder="请输入住院号" />
            </div>
            <div class="block">
                <span class="key">床号</span>
                <el-input v-model="search.BedNo" size="small" style="width: 130px;" placeholder="请输入床号" />
            </div>
            <div class="block">
                <span class="key">医院病区</span>
                <el-select v-model="search.wardNo" size="small" style="width: 130px;">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="2w" value="2w"></el-option>
                    <el-option label="3w" value="3w"></el-option>
                    <el-option label="7w" value="7w"></el-option>
                    <el-option label="15w" value="15w"></el-option>
                    <el-option label="16w" value="16w"></el-option>
                    <el-option label="22w" value="22w"></el-option>
                </el-select>
            </div>
            <div class="block">
                <el-button type="primary" size="small" @click="handleSearch" style="margin-left: 10px;" :loading="search.loading">搜索</el-button>
            </div>
        </div>
        <div class="content">
            <el-table :data="table.data" ref="data" 
                @selection-change="handleSelectionChange" 
                v-loading="table.loading" border 
                @row-click="handleClickRow"
                element-loading-text="加载中...">
                <el-table-column
                    type="selection"
                    align="center"
                    width="55">
                </el-table-column>
                <el-table-column label="序号" align="center" align="center" prop="No" width="50px"></el-table-column>
                <el-table-column label="床号" align="center" prop="hospitalBedNo" width="80px"></el-table-column>
                <el-table-column label="宝宝姓名" width="100" align="center" prop="userName">
                    <template slot-scope="scope" width="60px">
                        {{ scope.row.userName }}
                    </template>
                </el-table-column>
                <el-table-column label="住院号" align="center" prop="inPatientNo" width="100"></el-table-column>
                <el-table-column label="性别" align="center" prop="gender" width="50">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 'N' ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column label="出生日期" align="center" prop="birthday"></el-table-column>
                <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
                <el-table-column label="录入时间" align="center" prop="recordTime">
                    <template slot-scope="scope">
                        <div style="font-size: 12px; line-height: 16px;" v-html="scope.row.recordTime.replace(' ', '<br />')"></div>
                    </template>
                </el-table-column>
                <el-table-column label="推送通知" align="center" width="200" prop="milkQuantity">
                    <template slot-scope="scope">
                        <el-tooltip style="display: block;" effect="dark" :content="scope.row.milkMsg" placement="top" v-if="scope.row.milkMsg">
                            <div style="font-size: 12px;max-width: 200px;">{{ scope.row.milkMsg.length > 10 ? scope.row.milkMsg.substring(0, 10) + '...' : scope.row.milkMsg }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                    <template slot-scope="scope">
                        <el-tooltip style="display: block;" effect="dark" :content="scope.row.remark" placement="top" >
                            <div style="font-size: 12px;max-width: 500px;">{{ scope.row.remark.length > 10 ? scope.row.remark.substring(0, 10) + '...' : scope.row.remark }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      </template>
                </el-table-column>
            </el-tabel>
        </div>
        <div class="footer" style="padding-bottom: 50px;">
            <el-pagination
                background
                @current-change="handleChangePage"
                @size-change="handleSizeChange"
                :page-size="table.size"
                layout="prev, pager, next, total, sizes"
                :total="table.total">
            </el-pagination>
            <div style="position: fixed; right: 50px; bottom: 50px; z-index: 999;">
                <el-button @click="handleSubmit" :loading="loading" type="primary" size="small" style="width: 120px">确认发送</el-button>
            </div>
        </div>
    </div>
</body>
<script>
require([
    'bm/breastmilkSetList',
], function ($event) {
    $event.init()
})
</script>
</html>